<template>
  <div class="ChooseDrug">
    <van-nav-bar title="选择药物" right-text="保存" left-arrow @click-left="$router.push('/recordvisit')"
                 @click-right="saveDrugBtn"/>
    <!--    搜索-->
    <van-search
        v-model="searchName"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch">
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!--    选择药物-->
    <van-checkbox-group v-model="result">
      <van-cell-group>
        <van-cell
            v-for="(item, index) in drugList"
            clickable
            :key="item.drugId"
            :title="item.drugName"
            @click="toggle(index)">
          <template #right-icon>
            <van-checkbox :name="item" ref="checkboxes" shape="square" icon-size="15px"/>
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: "ChooseDrug",
  data() {
    return {
      searchName: '',
      drugList: '',//要去列表
      result: []
    }
  },
  mounted() {
    this.getDrugList();
  },
  methods: {
    //保存药物
    saveDrugBtn() {
      this.$router.push({path: '/recordvisit', query: {result: this.result}});
      Toast.success('保存成功');
    },
    //搜索药物
    onSearch() {
      this.$service.medicalHistoryService.searchDrugName(this.searchName).then(res => {
        this.drugList = res.data.data;
      })
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    //获取药物列表
    getDrugList() {
      this.$service.medicalHistoryService.getDrugList().then(res => {
        this.drugList = res.data.data;
      })
    }
  }
}
</script>

<style scoped>

</style>
